import React, { Component } from 'react'
import { Toast } from 'antd-mobile'

class Content extends Component {
  // 添加收藏
  addFav = () => {
    const { token, userid } = this.props
    if (!token) {
      Toast.info(
        '请先登录，再来完成收藏',
        2,
        () => {
          this.props.history.push('/login')
        },
        true
      )
    } else {
      // 收藏是需要用户id和菜谱id对有一个对应关系
      // 只有登录成功你才有用户id
      Toast.info('收藏成功' + userid, 2, null, true)
    }
  }

  render() {
    const { info } = this.props
    return (
      <>
        <img className='poster' src={info.img} title={info.name} />
        <div className='description'>
          <div>牛肉炒香菜</div>
          <div>1000浏览 2000收藏</div>
          <div onClick={this.addFav}>点击收藏</div>
        </div>
        {/* 富文本显示要注意，还要注意它的xss问题 */}
        <div className='content' dangerouslySetInnerHTML={{ __html: info.content }}></div>
      </>
    )
  }
}

export default Content
